<template>
  <div :style="{ padding: '60px' }">
    <h2 :style="{ fontSize: '24px', fontWeight: 600 }">
      无数据状态-自定义提示内容或操作
    </h2>
    <o-tree>
      <template #empty>
        暂无数据，您可以<a
          href="/"
          :style="{ color: 'blue' }"
        >返回首页</a>
      </template>
    </o-tree>

    <hr :style="{ margin: '40px 0' }" >

    <h2 :style="{ fontSize: '24px', fontWeight: 600 }">
      添加额外功能
    </h2>
    <o-tree :data="dataForExtras.data">
      <template #extras>
        <el-button
          type="primary"
          :style="{ backgroundColor: '#409EFF' }"
          @click="create"
        >创建</el-button>
      </template>
    </o-tree>

    <hr :style="{ margin: '40px 0' }" >
    <h2 :style="{ fontSize: '24px', fontWeight: 600 }">
      多选
    </h2>
    <o-tree
      :data="dataForMulti.data"
      show-checkbox
    />

    <hr :style="{ margin: '40px 0' }" >
    <h2 :style="{ fontSize: '24px', fontWeight: 600 }">
      自定义操作（对每个选项成立）
    </h2>
    <o-tree
      :data="dataForActions.data"
      :actions="dataForActions.actions"
    />

    <hr :style="{ margin: '40px 0' }" >
    <h2 :style="{ fontSize: '24px', fontWeight: 600 }">
      超出内容省略
    </h2>
    <o-tree
      :data="dataForOverflow.data"
      :theme="{ width: '100px' }"
    />

    <hr :style="{ margin: '40px 0' }" >
    <h2 :style="{ fontSize: '24px', fontWeight: 600 }">
      综合
    </h2>
    <o-tree
      check-strictly
      :icon-class="'el-icon-plus+'"
      :data="data"
      :actions="actions"
      show-filter
      show-create-button
      show-checkbox
      :theme="{ titleStyle: { fontSize:'14px',color: 'red' } }"
      @node-click="nodeClick"
    >
      <template #extras="extrasProps">
        <button
          v-if="!extrasProps.data || !extrasProps.data.length"
          @click="create"
        >
          创建按钮
        </button>
      </template>
      <template #labelSuffix="labelProps">
        <button>额外的label信息区域 {{ labelProps.data.id }}</button>
      </template>
    </o-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForExtras: {
        data: []
      },
      dataForMulti: {
        data: [
          {
            id: 1,
            label: "一级 1"
          },
          {
            id: 2,
            label: "一级 2"
          }
        ]
      },
      dataForActions: {
        actions: [
          {
            icon: {
              title: "create",
              type: "el-icon-plus",
              style: {
                color: "blue"
              }
            },
            label: "add",
            click(data) {
              alert("handle add")
            }
          },
          {
            label: "del",
            click(data) {
              alert("handle del")
            }
          }
        ],
        data: [
          {
            id: 1,
            label: "一级 1"
          },
          {
            id: 1,
            label: "一级 2"
          }
        ]
      },
      dataForOverflow: {
        data: [
          {
            id: 1,
            label: "一级 1111111111111111111111111",
            children: [
              {
                id: 4,
                label: "二级 1-122222222222222222222222",
                children: [
                  {
                    id: 9,
                    label: "三级 1-1-1111111111",
                    disabled: true
                  },
                  {
                    id: 10,
                    label: "三级 1-1-21111111111111111111",
                    disabled: true
                  }
                ]
              }
            ]
          }
        ]
      },
      actions: [
        {
          // icon 与 label必选一个
          // 都传 则icon优先
          // label 会被解释为文字型button
          // label与icon同时为空，则会报参数错误
          label: "编辑",
          click(data) {
            console.log("handle action click", data)
          }
        },
        {
          label: "添加子文件夹",
          click(data) {
            console.log("handle action click", data)
          }
        },
        {
          label: "删除",
          style: {
            color: "red"
          },
          click(data) {
            console.log("handle action click", data)
          }
        }
      ],
      data: [
        {
          id: 1,
          label: "系统人才库",
          subLabel:"（90）",
          children: [
            {
              id: 4,
              label: "已淘汰",
              subLabel:"（60）",
              children: [
                {
                  id: 9,
                  icon: {
                    title: "create",
                    type: "el-icon-platform-eleme",
                    style: {
                      color: "red"
                    }
                  },
                  label: "薪资不匹配",
                  subLabel:"（8）",
                  disabled: true
                },
                {
                  id: 10,
                  label: "学历不匹配",
                  subLabel:"（10）",
                  disabled: true
                }
              ]
            },
          ]
        },
        {
          id: 2,
          label: "已离职",
          subLabel:"（32）",
          children: [
            {
              id: 9,
              icon: {
                title: "create",
                type: "el-icon-platform-eleme",
                style: {
                  color: "red"
                }
              },
              label: "薪资不匹配",
              subLabel:"（8）",
            },
            {
              id: 10,
              label: "学历不匹配",
              subLabel:"（10）",
            }
          ]
        },
        {
          id: 3,
          label: "黑名单",
          subLabel:"（0）",
        }
      ]
    }
  },
  methods: {
    nodeClick() {
      console.log("here")
    },
    extrasClick() {
      console.log("extrasClick")
    },
    create() {
      this.dataForExtras.data.push({
        id: Math.random(),
        label: "自定义项",
        icon: {
          title: "create",
          type: "el-icon-platform-eleme",
          style: {
            color: "blue"
          }
        }
      })
      console.log(this.dataForExtras.data)
    }
  }
}
</script>
